<script lang="ts" setup>
import KeyboardShortcutTooltip from '@/app/components/KeyboardShortcutTooltip.vue';
import { useCanvasOperations } from '@/app/composables/useCanvasOperations';
import { useI18n } from '@n8n/i18n';
import { useRunWorkflow } from '@/app/composables/useRunWorkflow';
import { CHAT_TRIGGER_NODE_TYPE } from '@/app/constants';
import { useLogsStore } from '@/app/stores/logs.store';
import { useWorkflowsStore } from '@/app/stores/workflows.store';
import { computed, useCssModule } from 'vue';
import { useRouter } from 'vue-router';

import { N8nButton, N8nIcon } from '@n8n/design-system';
const {
	name,
	type,
	hovered,
	disabled,
	readOnly,
	class: cls,
	isExperimentalNdvActive,
} = defineProps<{
	name: string;
	type: string;
	hovered?: boolean;
	disabled?: boolean;
	readOnly?: boolean;
	class?: string;
	isExperimentalNdvActive: boolean;
}>();

const style = useCssModule();
const containerClass = computed(() => ({
	[cls ?? '']: true,
	[style.container]: true,
	[style.interactive]: !disabled && !readOnly,
	[style.hovered]: !!hovered,
	[style.isExperimentalNdvActive]: isExperimentalNdvActive,
}));

const router = useRouter();
const i18n = useI18n();
const workflowsStore = useWorkflowsStore();
const logsStore = useLogsStore();
const { runEntireWorkflow } = useRunWorkflow({ router });
const { startChat } = useCanvasOperations();

const isChatOpen = computed(() => logsStore.isOpen);
const isExecuting = computed(() => workflowsStore.isWorkflowRunning);
const testId = computed(() => `execute-workflow-button-${name}`);

async function handleClickExecute() {
	workflowsStore.setSelectedTriggerNodeName(name);
	await runEntireWorkflow('node', name);
}
</script>

<template>
	<!-- click and mousedown event are suppressed to avoid unwanted selection or dragging of the node -->
	<div :class="containerClass" @click.stop.prevent @mousedown.stop.prevent>
		<div>
			<div :class="$style.bolt">
				<N8nIcon icon="bolt-filled" size="large" />
			</div>

			<template v-if="!readOnly">
				<template v-if="type === CHAT_TRIGGER_NODE_TYPE">
					<N8nButton
						v-if="isChatOpen"
						type="secondary"
						icon="message-circle"
						size="large"
						:disabled="isExecuting"
						:data-test-id="testId"
						:label="i18n.baseText('chat.hide')"
						@click.capture="logsStore.toggleOpen(false)"
					/>
					<KeyboardShortcutTooltip
						v-else
						:label="i18n.baseText('chat.open')"
						:shortcut="{ keys: ['c'] }"
					>
						<N8nButton
							type="primary"
							icon="message-circle"
							size="large"
							:disabled="isExecuting"
							:data-test-id="testId"
							:label="i18n.baseText('chat.open')"
							@click.capture="startChat('node')"
						/>
					</KeyboardShortcutTooltip>
				</template>
				<N8nButton
					v-else
					type="primary"
					icon="flask-conical"
					size="large"
					:disabled="isExecuting"
					:data-test-id="testId"
					:label="i18n.baseText('nodeView.runButtonText.executeWorkflow')"
					@click.capture="handleClickExecute"
				/>
			</template>
		</div>
	</div>
</template>

<style lang="scss" module>
.container {
	z-index: -1;
	position: absolute;
	display: flex;
	align-items: center;
	height: 100%;
	right: 100%;
	top: 0;
	pointer-events: none;

	& > div {
		position: relative;
		display: flex;
		align-items: center;
	}

	& button {
		margin-right: var(--spacing--sm);
		opacity: 0;
		translate: -12px 0;
		transition:
			translate 0.1s ease-in,
			opacity 0.1s ease-in;
		/* stylelint-disable-next-line @n8n/css-var-naming */
		transform: scale(var(--canvas-zoom-compensation-factor, 1));
		transform-origin: center right;
	}

	&.interactive.hovered button {
		opacity: 1;
		translate: 0 0;
		pointer-events: all;
	}

	&.isExperimentalNdvActive {
		height: var(--spacing--2xl);
	}
}

.bolt {
	position: absolute;
	right: 0;
	color: var(--color--primary);
	padding: var(--spacing--sm);
	opacity: 1;
	translate: 0 0;
	transition:
		translate 0.1s ease-in,
		opacity 0.1s ease-in;

	.container.interactive.hovered & {
		translate: -12px 0;
		opacity: 0;
	}
}
</style>
